<template>
  <div>
    <a-row>
      <a-col :span="18"></a-col>
      <a-col :span="6">
        <a-range-picker
          v-model="selectDate"
          :showTime="true"
          format="YYYY/MM/DD HH:mm:ss"
          :ranges="timeRanges"
          @ok="selectDateOk"
        />
      </a-col>
    </a-row>
    <a-tabs :activeKey="tabActiveName" @tabClick="handleTabClick" :visible="isShow">
      <a-tab-pane tab="应用指标" key="appMetricsInfo">
        <a-tabs :activeKey="appMetricTabActiveName" @tabClick="handleAppMetricTabClick" tab-position="left">
          <a-tab-pane tab="应用访问指标" key="appAccessMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="reqRateIframe" class="panelIframe" :src="reqRateIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="respRateIframe" class="panelIframe" :src="respRateIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="reqLatencyIframe" class="panelIframe" :src="reqLatencyIframeUrl" frameborder="0">
                </iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="respLatencyIframe" class="panelIframe" :src="respLatencyIframeUrl" frameborder="0">
                </iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="serverErrRateIframe" class="panelIframe" :src="serverErrRateIframeUrl" frameborder="0">
                </iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="l7LatencyIframe" class="panelIframe" :src="l7LatencyIframeUrl" frameborder="0"> </iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="reqCountIframe" class="panelIframe" :src="reqCountIframeUrl" frameborder="0"> </iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="respCountIframe" class="panelIframe" :src="respCountIframeUrl" frameborder="0"> </iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="l7SendBytesIframe" class="panelIframe" :src="l7SendBytesIframeUrl" frameborder="0">
                </iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="l7RecvBytesIframe" class="panelIframe" :src="l7RecvBytesIframeUrl" frameborder="0">
                </iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="l7SendPacketsIframe" class="panelIframe" :src="l7SendPacketsIframeUrl" frameborder="0">
                </iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="l7RecvPacketsIframe" class="panelIframe" :src="l7RecvPacketsIframeUrl" frameborder="0">
                </iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="应用 API 指标" key="appApiMetricsInfo">
            <a-card>
              <a-row>
                <a-col :span="8">
                  API 列表:
                  <a-select
                    ref="select"
                    mode="multiple"
                    :value="apiSelectValue"
                    @change="handleApiSelectChange"
                    :maxTagCount="1"
                    :allowClear="true"
                    style="width: 60%"
                    :dropdownMatchSelectWidth="false"
                  >
                    <a-select-option v-for="val in apiList" :key="val">{{ val }}</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-card>
            <a-card>
              <a-row :gutter="5">
                <a-col :span="12">
                  <iframe
                    title="apiRepCountIframe"
                    class="panelIframe"
                    :src="apiReqCountIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
                <a-col :span="12">
                  <iframe
                    title="apiRespCountIframe"
                    class="panelIframe"
                    :src="apiRespCountIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
              </a-row>
              <a-row :gutter="5">
                <a-col :span="12">
                  <iframe
                    title="apiReqThroughtputIframe"
                    class="panelIframe"
                    :src="apiReqThroughtputIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
                <a-col :span="12">
                  <iframe
                    title="apiRespThroughtputIframe"
                    class="panelIframe"
                    :src="apiRespThroughtputIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
              </a-row>
              <a-row :gutter="5">
                <a-col :span="12">
                  <iframe
                    title="apiErrRatioIframe"
                    class="panelIframe"
                    :src="apiErrRatioIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
                <a-col :span="12">
                  <iframe
                    title="apiErrCountIframe"
                    class="panelIframe"
                    :src="apiErrCountIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
              </a-row>
              <a-row :gutter="5">
                <a-col :span="12">
                  <iframe
                    title="apiLatencyAvgIframe"
                    class="panelIframe"
                    :src="apiLatencyAvgIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
                <a-col :span="12">
                  <iframe
                    title="apiLatencySumIframe"
                    class="panelIframe"
                    :src="apiLatencySumIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
              </a-row>
              <a-row :gutter="5">
                <a-col :span="12">
                  <iframe
                    title="apiLatencyIframeUrl"
                    class="panelIframe"
                    :src="apiLatencyIframeUrl"
                    frameborder="0"
                  ></iframe>
                </a-col>
              </a-row>
            </a-card>
          </a-tab-pane>
          <a-tab-pane tab="应用 I/O 指标" key="appIOMetricsInfo">
            <!-- todo: 应用I/O时延 panel -->
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="ioRateIframe" class="panelIframe" :src="ioRateIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="iowaitIframe" class="panelIframe" :src="iowaitIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="bioWaitIframe" class="panelIframe" :src="bioWaitIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="bioErrCountIframe"
                  class="panelIframe"
                  :src="bioErrCountIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="largeIOCountIframe"
                  class="panelIframe"
                  :src="largeIOCountIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="smallIOCountIframe"
                  class="panelIframe"
                  :src="smallIOCountIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="fdCountIframe" class="panelIframe" :src="fdCountIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="fsReadLatencyIframe"
                  class="panelIframe"
                  :src="fsReadLatencyIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="fsWriteLatencyIframe"
                  class="panelIframe"
                  :src="fsWriteLatencyIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="fsFlushLatencyIframe"
                  class="panelIframe"
                  :src="fsFlushLatencyIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="应用 CPU 指标" key="appCpuMetricsInfo">
            <!-- todo: 用户态CPU使用率 panel 系统态CPU使用率 panel -->
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="offcpuIframe" class="panelIframe" :src="offcpuIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="应用内存指标" key="appMemMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="pmSizeIframe" class="panelIframe" :src="pmSizeIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="vmSizeIframe" class="panelIframe" :src="vmSizeIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="swapIframe" class="panelIframe" :src="swapIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="referencedIframe"
                  class="panelIframe"
                  :src="referencedIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="minorPagefaultIframe"
                  class="panelIframe"
                  :src="minorPagefaultIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="majorPagefaultIframe"
                  class="panelIframe"
                  :src="majorPagefaultIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="应用 JVM 指标" key="appJvmMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="jvmThreadsIframe"
                  class="panelIframe"
                  :src="jvmThreadsIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="jvmMemIframe" class="panelIframe" :src="jvmMemIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="jvmMemPoolIframeUrl"
                  class="panelIframe"
                  :src="jvmMemPoolIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="jvmBufferPoolIframe"
                  class="panelIframe"
                  :src="jvmBufferPoolIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="jvmGcCountIframe"
                  class="panelIframe"
                  :src="jvmGcCountIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="jvmGcTimeIframe" class="panelIframe" :src="jvmGcTimeIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane tab="应用网络" key="appNetInfo">
        <a-tabs :activeKey="appNetInfoActiveName" @tabClick="handleAppNetInfoTabClick" tab-position="left">
          <a-tab-pane tab="TCP 指标" key="tcpMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="tcpRateIframe" class="panelIframe" :src="tcpRateIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="tcpRstIframeUrl" class="panelIframe" :src="tcpRstIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpRetranPacketsIframeUrl"
                  class="panelIframe"
                  :src="tcpRetranPacketsIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpRetranRatioIframeUrl"
                  class="panelIframe"
                  :src="tcpRetranRatioIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="tcpSrttIframeUrl" class="panelIframe" :src="tcpSrttIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpRecvRttIframeUrl"
                  class="panelIframe"
                  :src="tcpRecvRttIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpAvlSndWndIframeUrl"
                  class="panelIframe"
                  :src="tcpAvlSndWndIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpSndCwndIframeUrl"
                  class="panelIframe"
                  :src="tcpSndCwndIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpSndWndIframeUrl"
                  class="panelIframe"
                  :src="tcpSndWndIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpRcvWndIframeUrl"
                  class="panelIframe"
                  :src="tcpRcvWndIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpZeroWndRatioIframeUrl"
                  class="panelIframe"
                  :src="tcpZeroWndRatioIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpZeroWndIframeUrl"
                  class="panelIframe"
                  :src="tcpZeroWndIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpLostOutIframeUrl"
                  class="panelIframe"
                  :src="tcpLostOutIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpDropPacketsIframeUrl"
                  class="panelIframe"
                  :src="tcpDropPacketsIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpBacklogDropsIframeUrl"
                  class="panelIframe"
                  :src="tcpBacklogDropsIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="tcpOomIframeUrl" class="panelIframe" :src="tcpOomIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpEstablishLinkFailedIframeUrl"
                  class="panelIframe"
                  :src="tcpEstablishLinkFailedIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpServerEstablishFailedIframeUrl"
                  class="panelIframe"
                  :src="tcpServerEstablishFailedIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpSynSentIframeUrl"
                  class="panelIframe"
                  :src="tcpSynSentIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpRetranSynIframeUrl"
                  class="panelIframe"
                  :src="tcpRetranSynIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpSynackSentIframeUrl"
                  class="panelIframe"
                  :src="tcpSynackSentIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="tcpRetranSynacksIframeUrl"
                  class="panelIframe"
                  :src="tcpRetranSynacksIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="tcpSackedOutIframeUrl"
                  class="panelIframe"
                  :src="tcpSackedOutIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="UDP 指标" key="udpMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="udpIframe" class="panelIframe" :src="udpIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe title="udpDropsIframe" class="panelIframe" :src="udpDropsIframeUrl" frameborder="0"></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="DNS 指标" key="dnsMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe title="dnsCountIframe" class="panelIframe" :src="dnsCountIframeUrl" frameborder="0"></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="dnsMaxDelayIframe"
                  class="panelIframe"
                  :src="dnsMaxDelayIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="网络时延" key="netLatencyMetricsInfo">
            <a-row :gutter="5">
              <a-col :span="12">
                <iframe
                  title="perfRxDelayIframe"
                  class="panelIframe"
                  :src="perfRxDelayIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
              <a-col :span="12">
                <iframe
                  title="perfTxDelayIframe"
                  class="panelIframe"
                  :src="perfTxDelayIframeUrl"
                  frameborder="0"
                ></iframe>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane tab="流量关系" key="appTrafficRelation">
        流量关系
        <a-table :columns="trafficTableColumns" :data-source="trafficTableData" rowKey="id">
          <template slot="clientName" slot-scope="record">
            <a-button type="link" @click="click(record.client)">{{ record.client.name }}</a-button>
          </template>
          <template slot="serverName" slot-scope="record">
            <a-button type="link" @click="click(record.server)">{{ record.server.name }}</a-button>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane tab="持续 profiling" key="appProfiling" :forceRender="true">
        <a-tabs :activeKey="profilingActiveKey" tab-position="left" @tabClick="handleProfilingTabClick">
          <a-tab-pane tab="火焰图" key="flamegraph">
            <a-card class="flamegraphFilter">
              <a-row>
                <a-col :span="6">
                  <span>火焰图类型：</span>
                  <a-select :value="flamegraphSelectType" @change="flamegraphSelectTypeChange">
                    <a-select-option value="oncpu">oncpu</a-select-option>
                    <a-select-option value="offcpu">offcpu</a-select-option>
                    <a-select-option value="mem">mem</a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="10">
                  <a-checkbox :checked="multiInstanceChecked" @change="multiInstanceChanged"
                    >火焰图探针是否开启多实例配置</a-checkbox
                  >
                </a-col>
                <a-col :span="8"> </a-col>
              </a-row>
            </a-card>
            <a-card>
              <iframe
                title="flamegraphUrl"
                :src="flamegraphPanelUrl"
                style="width: 100%; height: 500px"
                frameborder="0"
              >
              </iframe>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane tab="异常事件" key="appEvent">
        <a-table
          :columns="eventTableColumns"
          :data-source="eventTableData"
          :customRow="rowclick"
          rowKey="machine_id"
          border
        >
        </a-table>
      </a-tab-pane>
      <a-tab-pane tab="问题诊断" key="appDiagnosis"> 问题诊断 </a-tab-pane>
      <a-tab-pane tab="应用部署关系" key="appTagList"> 应用所有标签信息 </a-tab-pane>
      <a-tab-pane tab="访问日志" key="appAccessLog"> 访问日志 </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getCSTrafficList } from '@/views/app/req'
import { api } from '@/api'
import { timeRanges } from '@/views/app/components'

export default {
  name: 'AppDetail',
  props: [
    'isShow',
    'machine_id',
    'podId',
    'tgid',
    'windowWidth',
    'objectType',
    'objectId',
    'startTimestamp',
    'endTimestamp',
  ],
  data() {
    return {
      selectDate: [],
      tabActiveName: 'appMetricsInfo',
      appMetricTabActiveName: 'appAccessMetricsInfo',
      appNetInfoActiveName: 'tcpMetricsInfo',
      eventTableData: [],
      eventTableColumns: [
        {
          title: '时间',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '主机',
          dataIndex: 'host',
          key: 'host',
        },
        {
          title: '进程 ID',
          dataIndex: '',
          key: '',
        },
        {
          title: '进程名',
          dataIndex: '',
          key: '',
        },
        {
          title: '容器 ID',
          dataIndex: '',
          key: '',
        },
        {
          title: 'POD',
          dataIndex: '',
          key: '',
        },
        {
          title: 'IP 信息',
          dataIndex: '',
          key: '',
        },
        {
          title: '设备信息',
          dataIndex: '',
          key: '',
        },
        {
          title: '事件内容',
          dataIndex: '',
          key: '',
        },
      ],
      trafficTableData: [],
      trafficTableColumns: [
        {
          title: '客户端应用',
          key: 'clientName',
          scopedSlots: {
            customRender: 'clientName',
          },
        },
        {
          title: '服务端应用',
          key: 'serverName',
          scopedSlots: {
            customRender: 'serverName',
          },
        },
        {
          title: '请求速率',
          dataIndex: 'client.reqRate',
          key: 'reqRate',
        },
        {
          title: '服务端异常比例',
          dataIndex: 'server.serverExceptionRate',
          key: 'serverExceptionRate',
        },
        {
          title: '请求时延',
          dataIndex: 'client.reqLatency',
          key: 'reqLatency',
        },
        {
          title: '响应时延',
          dataIndex: 'server.respLatency',
          key: 'respLatency',
        },
        {
          title: 'TCP时延',
          dataIndex: 'tcpLatency',
          key: 'tcpLatency',
        },
      ],
      flamegraphPanelUrl: '',
      flamegraphSelectType: 'oncpu',
      multiInstanceChecked: true,
      timelineSelectDate: [],
      profilingActiveKey: 'flamegraph',
      timelineChart: {},
      timelineEventTableData: [],
      threadMap: {}, // <thread, event_list>
      threadChartMap: {}, // <thread, chart>
      cpuEventChart: {},
      syscallEventChart: {},
      topReqRateChart: {},
      timelineThreadList: [],
      timelineSelectValue: [],
      timelineRequestData: {},
      // app access iframe url
      reqRateIframeUrl: '',
      respRateIframeUrl: '',
      serverErrRateIframeUrl: '',
      reqLatencyIframeUrl: '',
      respLatencyIframeUrl: '',
      l7LatencyIframeUrl: '',
      reqCountIframeUrl: '',
      respCountIframeUrl: '',
      l7SendBytesIframeUrl: '',
      l7RecvBytesIframeUrl: '',
      l7SendPacketsIframeUrl: '',
      l7RecvPacketsIframeUrl: '',
      timeRanges: timeRanges,
      // app io iframe url
      iowaitIframeUrl: '',
      bioWaitIframeUrl: '',
      bioErrCountIframeUrl: '',
      ioRateIframeUrl: '',
      fdCountIframeUrl: '',
      largeIOCountIframeUrl: '',
      smallIOCountIframeUrl: '',
      fsReadLatencyIframeUrl: '',
      fsWriteLatencyIframeUrl: '',
      fsFlushLatencyIframeUrl: '',
      // app api iframe url
      apiReqCountIframeUrl: '',
      apiRespCountIframeUrl: '',
      apiReqThroughtputIframeUrl: '',
      apiRespThroughtputIframeUrl: '',
      apiErrRatioIframeUrl: '',
      apiErrCountIframeUrl: '',
      apiLatencyAvgIframeUrl: '',
      apiLatencySumIframeUrl: '',
      apiLatencyIframeUrl: '',
      // app cpu iframe url
      offcpuIframeUrl: '',
      // app mem iframe url
      pmSizeIframeUrl: '',
      vmSizeIframeUrl: '',
      minorPagefaultIframeUrl: '',
      majorPagefaultIframeUrl: '',
      swapIframeUrl: '',
      referencedIframeUrl: '',
      // app jvm iframe url
      jvmThreadsIframeUrl: '',
      jvmMemIframeUrl: '',
      jvmMemPoolIframeUrl: '',
      jvmBufferPoolIframeUrl: '',
      jvmGcCountIframeUrl: '',
      jvmGcTimeIframeUrl: '',
      // app tcp iframe url
      tcpRateIframeUrl: '',
      tcpRetranPacketsIframeUrl: '',
      tcpRetranRatioIframeUrl: '',
      tcpEstablishLinkFailedIframeUrl: '',
      tcpSrttIframeUrl: '',
      tcpRecvRttIframeUrl: '',
      tcpAvlSndWndIframeUrl: '',
      tcpSndWndIframeUrl: '',
      tcpRcvWndIframeUrl: '',
      tcpSndCwndIframeUrl: '',
      tcpZeroWndRatioIframeUrl: '',
      tcpZeroWndIframeUrl: '',
      tcpRstIframeUrl: '',
      tcpSackedOutIframeUrl: '',
      tcpLostOutIframeUrl: '',
      tcpDropPacketsIframeUrl: '',
      tcpBacklogDropsIframeUrl: '',
      tcpOomIframeUrl: '',
      tcpSynSentIframeUrl: '',
      tcpRetranSynIframeUrl: '',
      tcpSynackSentIframeUrl: '',
      tcpRetranSynacksIframeUrl: '',
      tcpServerEstablishFailedIframeUrl: '',
      // app udp iframe url
      udpIframeUrl: '',
      udpDropsIframeUrl: '',
      // app dns iframe url
      dnsCountIframeUrl: '',
      dnsMaxDelayIframeUrl: '',
      // app network latency iframe url
      perfRxDelayIframeUrl: '',
      perfTxDelayIframeUrl: '',
      apiSelectValue: [],
      apiList: [],
      grafanaServerAddr: '',
    }
  },
  mounted() {
    this.mountedInitPage()
  },
  methods: {
    async mountedInitPage() {
      await this.initGrafanaServerAddr()
      console.log('machine_id:', this.machine_id)
      console.log('podId:', this.podId)
      console.log('tgid:', this.tgid)
      console.log('startTimestamp:', this.startTimestamp)
      console.log('endTimestamp:', this.endTimestamp)
      this.initPage()
    },
    initPage() {
      this.selectDate.push(dayjs(this.startTimestamp))
      this.selectDate.push(dayjs(this.endTimestamp))
      this.initAppAccessMetricsChartList()
    },
    async initGrafanaServerAddr() {
      // const [_, res] = await api.getGrafanaServerAddr()
      this.grafanaServerAddr = '/grafanaweb';
    },
    async handleTabClick(tab) {
      this.tabActiveName = tab
      switch (this.tabActiveName) {
        case 'appMetricsInfo':
          this.appMetricTabActiveName = 'appAccessMetricsInfo'
          this.initAppAccessMetricsChartList()
          break
        case 'appTrafficRelation':
          this.trafficTableData = await getCSTrafficList({
            startTime: this.selectDate[0].valueOf() / 1000,
            endTime: this.selectDate[1].valueOf() / 1000,
            queryKeyword: this.tgid,
          })
          break
        case 'appNetInfo':
          this.appNetInfoActiveName = 'tcpMetricsInfo'
          this.initAppTcpMetricsChartList()
          break
        case 'appProfiling':
          this.initFlamegraphTab()
          break
        case 'appAccessLog':
          break
        case 'appEvent':
          break
        case 'appTagList':
          break
        case 'appDiagnosis':
          break
      }
    },
    handleAppMetricTabClick(tab) {
      this.appMetricTabActiveName = tab
      switch (this.appMetricTabActiveName) {
        case 'appAccessMetricsInfo':
          this.initAppAccessMetricsChartList()
          break
        case 'appIOMetricsInfo':
          this.initAppIOMetricsChartList()
          break
        case 'appApiMetricsInfo':
          this.initApiList()
          this.initAppApiMetricsChartList()
          break
        case 'appCpuMetricsInfo':
          this.initAppCpuMetricsChartList()
          break
        case 'appMemMetricsInfo':
          this.initAppMemMetricsChartList()
          break
        case 'appJvmMetricsInfo':
          this.initAppJvmMetricsChartList()
          break
      }
    },
    handleAppNetInfoTabClick(tab) {
      this.appNetInfoActiveName = tab
      switch (this.appNetInfoActiveName) {
        case 'tcpMetricsInfo':
          this.initAppTcpMetricsChartList()
          break
        case 'udpMetricsInfo':
          this.initAppUdpMetricsChartList()
          break
        case 'dnsMetricsInfo':
          this.initAppDnsMetricsChartList()
          break
        case 'netLatencyMetricsInfo':
          this.initAppNetLatencyMetricsChartList()
          break
      }
    },
    rowclick(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    initFlamegraphTab() {
      this.flamegraphSelectType = 'oncpu'
      this.multiInstanceChecked = true
      this.flamegraphPanelUrl = ''
      this.initFlamegraphUrl()
    },
    initFlamegraphUrl() {
      if (this.multiInstanceChecked) {
        this.flamegraphPanelUrl = `${this.grafanaServerAddr}/d-solo/a1oRYqNIz/system-flame-copy?orgId=1
          &var-machine_id=${this.machine_id}&var-type=${this.flamegraphSelectType}&var-tgid=${this.tgid}
          &from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=23&theme=light`
      } else {
        this.flamegraphPanelUrl = `${this.grafanaServerAddr}/d-solo/a1oRYqNIz/system-flame-copy?orgId=1
        &var-machine_id=${this.machine_id}&var-type=${this.flamegraphSelectType}&from=${this.selectDate[0].valueOf()}
        &to=${this.selectDate[1].valueOf()}&panelId=24&theme=light`
      }
      console.log('flamegraph tag', `${this.flamegraphSelectType}-${this.machine_id}.${this.tgid}`)
    },
    multiInstanceChanged(e) {
      this.multiInstanceChecked = e.target.checked
      this.initFlamegraphUrl()
    },
    flamegraphSelectTypeChange(value, option) {
      this.flamegraphSelectType = value
      this.initFlamegraphUrl()
    },
    handleProfilingTabClick(tab) {
      this.profilingActiveKey = tab
      switch (tab) {
        case 'flamegraph':
          this.initFlamegraphUrl()
          break
        case 'timeline':
          this.inittimeline()
          this.inittimelineData(true)
          break
      }
    },
    getQueryPattern() {
      var queryPattern = ''
      var panelIndex = 0
      switch (this.objectType) {
        case 'pod':
          queryPattern = `var-pod_id=${this.objectId}&var-container_id=-1&var-tgid=-1`
          panelIndex = 0
          break
        case 'container':
          queryPattern = `var-pod_id=-1&var-container_id=${this.objectId}&var-tgid=-1`
          panelIndex = 1
          break
        case 'proc':
          queryPattern = `var-pod_id=-1&var-container_id=-1&var-tgid=${this.objectId}`
          panelIndex = 2
          break
      }
      return { queryPattern: queryPattern, panelIndex: panelIndex }
    },
    initAppAccessMetricsChartList() {
      const panelIdMap = {
        l7LatencyIframe: [97, 125, 160],
      }
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      var panelIndex = res.panelIndex
      this.reqRateIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=66&theme=light`
      this.respRateIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=129&theme=light`
      this.serverErrRateIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=86&theme=light`
      this.reqLatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=127&theme=light`
      this.respLatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=96&theme=light`
      this.l7LatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
           panelIdMap['l7LatencyIframe'][panelIndex]
         }&theme=light`
      this.reqCountIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=89&theme=light`
      this.respCountIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=90&theme=light`
      this.l7SendBytesIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=91&theme=light`
      this.l7RecvBytesIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=92&theme=light`
      this.l7SendPacketsIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=93&theme=light`
      this.l7RecvPacketsIframeUrl = `${this.grafanaServerAddr}/d-solo/xvSeLIKIz/appdetail-appaccesspanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=94&theme=light`
    },
    initAppIOMetricsChartList() {
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      this.iowaitIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=97&theme=light`
      this.bioWaitIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=66&theme=light`
      this.bioErrCountIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=171&theme=light`
      this.ioRateIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=177&theme=light`
      this.fdCountIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=182&theme=light`
      this.largeIOCountIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=188&theme=light`
      this.smallIOCountIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=192&theme=light`
      this.fsReadLatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=200&theme=light`
      this.fsWriteLatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=204&theme=light`
      this.fsFlushLatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=210&theme=light`
    },
    initAppCpuMetricsChartList() {
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      this.offcpuIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=220&theme=light`
    },
    initAppMemMetricsChartList() {
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      this.pmSizeIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1&
            &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=222&theme=light`
      this.vmSizeIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1&
            &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=226&theme=light`
      this.minorPagefaultIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1&
            &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=223&theme=light`
      this.majorPagefaultIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1&
            &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=225&theme=light`
      this.swapIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1&
            &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=224&theme=light`
      this.referencedIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1&
            &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=227&theme=light`
    },
    initAppJvmMetricsChartList() {
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      this.jvmThreadsIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
      &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=229&theme=light`
      this.jvmMemIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
      &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=230&theme=light`
      this.jvmMemPoolIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
      &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=231&theme=light`
      this.jvmBufferPoolIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
      &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=232&theme=light`
      this.jvmGcCountIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
      &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=233&theme=light`
      this.jvmGcTimeIframeUrl = `${this.grafanaServerAddr}/d-solo/j7UouKFIk/appdetail-appiopanels?orgId=1
      &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=234&theme=light`
    },
    async initApiList() {
      console.log('[initApiList]')
      var param = {
        startTime: this.selectDate[0].valueOf() / 1000,
        endTime: this.selectDate[1].valueOf() / 1000,
        type: this.objectType,
        objectId: this.objectId,
      }
      this.apiList = []
      this.apiSelectValue = []
      const [_, res] = await api.getApiList(param)

      var data = res.data.result
      for (var item of data) {
        this.apiList.push(item.metric.api)
      }
    },
    initAppApiMetricsChartList() {
      const panelIdMap = {
        l7LatencyIframe: [97, 125, 160],
      }
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      var panelIndex = res.panelIndex
      var api = ''

      if (this.apiSelectValue.length !== 0) {
        for (var item of this.apiSelectValue) {
          api += `&var-api=${item}`
        }
      } else {
        api = `&var-api=-1`
      }

      this.apiReqCountIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=89&theme=light`
      this.apiRespCountIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=90&theme=light`
      this.apiReqThroughtputIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=172&theme=light`
      this.apiRespThroughtputIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=176&theme=light`
      this.apiErrRatioIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=173&theme=light`
      this.apiErrCountIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=175&theme=light`
      this.apiLatencyAvgIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=174&theme=light`
      this.apiLatencySumIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=177&theme=light`
      this.apiLatencyIframeUrl = `${this.grafanaServerAddr}/d-solo/hfqI52FIk/appdetail-appl7apipanels?orgId=1&
       &${queryPattern}${api}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
         panelIdMap['l7LatencyIframe'][panelIndex]
       }&theme=light`
    },
    handleApiSelectChange(value) {
      this.apiSelectValue = value
      this.initAppApiMetricsChartList()
    },
    initAppTcpMetricsChartList() {
      const panelIdMap = {
        tcpSrtt: [188, 189, 190],
        tcpRecvRtt: [193, 194, 195],
        tcpAvlSnd: [197, 200, 201],
        tcpSndWnd: [209, 210, 211],
        tcpRcvWnd: [213, 214, 215],
        tcpSndCwnd: [217, 218, 219],
      }
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      var panelIndex = res.panelIndex
      this.tcpRateIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=181&theme=light`
      this.tcpRetranPacketsIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=184&theme=light`
      this.tcpRetranRatioIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=185&theme=light`
      this.tcpEstablishLinkFailedIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=186&theme=light`
      this.tcpSrttIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
          panelIdMap['tcpSrtt'][panelIndex]
        }&theme=light`
      this.tcpRecvRttIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
          panelIdMap['tcpRecvRtt'][panelIndex]
        }&theme=light`
      this.tcpAvlSndWndIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
          panelIdMap['tcpAvlSnd'][panelIndex]
        }&theme=light`
      this.tcpSndWndIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
          panelIdMap['tcpSndWnd'][panelIndex]
        }&theme=light`
      this.tcpRcvWndIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
          panelIdMap['tcpRcvWnd'][panelIndex]
        }&theme=light`
      this.tcpSndCwndIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
          panelIdMap['tcpSndCwnd'][panelIndex]
        }&theme=light`
      this.tcpZeroWndRatioIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=220&theme=light`
      this.tcpZeroWndIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=221&theme=light`
      this.tcpRstIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=222&theme=light`
      this.tcpSackedOutIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=223&theme=light`
      this.tcpLostOutIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=224&theme=light`
      this.tcpDropPacketsIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=225&theme=light`
      this.tcpBacklogDropsIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=226&theme=light`
      this.tcpOomIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=227&theme=light`
      this.tcpSynSentIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=228&theme=light`
      this.tcpRetranSynIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=229&theme=light`
      this.tcpSynackSentIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=230&theme=light`
      this.tcpRetranSynacksIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=231&theme=light`
      this.tcpServerEstablishFailedIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
        &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=232&theme=light`
    },
    initAppUdpMetricsChartList() {
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      this.udpIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=234&theme=light`
      this.udpDropsIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=235&theme=light`
    },
    initAppDnsMetricsChartList() {
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      this.dnsCountIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=241&theme=light`
      this.dnsMaxDelayIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=242&theme=light`
    },
    initAppNetLatencyMetricsChartList() {
      const panelIdMap = {
        perfRxDelay: [244, 251, 252],
        perfTxDelay: [246, 247, 248],
      }
      var res = this.getQueryPattern()
      var queryPattern = res.queryPattern
      var panelIndex = res.panelIndex
      this.perfRxDelayIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
           panelIdMap['perfRxDelay'][panelIndex]
         }&theme=light`
      this.perfTxDelayIframeUrl = `${this.grafanaServerAddr}/d-solo/7uHMwuFSz/appdetail-network?orgId=1
         &${queryPattern}&from=${this.selectDate[0].valueOf()}&to=${this.selectDate[1].valueOf()}&panelId=${
           panelIdMap['perfTxDelay'][panelIndex]
         }&theme=light`
    },
    selectDateOk(e) {
      if (this.tabActiveName === 'appMetricsInfo') {
        this.handleAppMetricTabClick(this.appMetricTabActiveName)
      } else if (this.tabActiveName === 'appNetInfo') {
        this.handleAppNetInfoTabClick(this.appNetInfoActiveName)
      } else {
        this.handleTabClick(this.tabActiveName)
      }
    },
  },
  watch: {},
}
</script>

<style lang="less" scoped>
::v-deep {
  .flamegraphFilter {
    padding-bottom: 5px;
  }

  .panelTitle {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
  .panelIframe {
    width: 100%;
    height: 200px;
  }
}
</style>
